<template>
  <div class="anouter">
    <div class="analysis-right">
      <div class="analysis-r-top bg_style  border_style">
        <YsInput style="width: 200px;margin-right:10px" clearable v-model.trim="page.keyword" placeholder="请输入字段"></YsInput>
        <YsButton type="primary" class="searchBtn" @click="getFielList(true)">查询</YsButton>
        <div class="open-btn">
          <YsButton class="searchBtn" type="primary" style="padding:0" @click="addFielFn(null)">新增字段</YsButton>
          <YsButton class="searchBtn" style="margin-left:10px" @click="$router.push({ name: 'reportTPL' })">返回
          </YsButton>
        </div>
      </div>
      <div class="analysis-r-bom bg_style  border_style" ref="tableOuter">
        <proTable class="table-st" :loading="tableLoad" :columns="columns" :data="tableData" @clickPage="onClickPage" :current="page.start_recd" :total="page.allTotal" :pageSize="page.limit_recd">
        </proTable>
      </div>
    </div>
    <!-- 字段 -->
    <add-fiel ref="addFielDom"></add-fiel>
  </div>
</template>
<script>
import { mapGetters, mapState, mapActions } from "vuex";
import addFiel from './components/addFiel'
export default {
  name: "application",
  components: {
    addFiel
  },
  data() {
    return {
      page: {
        keyword: "",
        field_classes:[1,2,3,4,5],
        // field_classes:[30],
        allTotal: 0,
        start_recd: 1,
        limit_recd: 10
      },
      tableLoad: false,
      columns: [
        {
          title: "序号",
          width: 90,
          type: 'index',
          align: 'center',
          tooltip: true
        },

        {
          title: "字段",
          minWidth: 100,
          key: "field_name",
          tooltip: true
        },
        {
          title: "编码",
          minWidth: 100,
          key: "field_code",
          tooltip: true
        },
        {
          title: "字段类型",
          key: "field_type",
          minWidth: 100,
          tooltip: true,
          render: (h, params) => {
            return h("span", `${params.row.field_type == 1 ? "文本" : "数值"}`)
          },
        },
        {
          title: "备注",
          key: "remark",
          minWidth: 100,
          tooltip: true,
        },
        {
          title: "操作",
          width: 150,
          render: (h, params) => {
            return h(
              "div",
              {
                attrs: { class: "mouse-on" },
              },
              [
                h("span", {
                  on: {
                    click: (event) => {
                      if (params.row.sys_default_field != 1) {

                        this.addFielFn(params.row)
                      }
                    },
                  },
                  class: `${params.row.sys_default_field != 1 ? "textColor" : "textColor2"}`,
                  style: {
                    fontSize: "16px",
                    margin: "0 0 0 8px",

                  },
                }, '编辑'),
                h("span", {
                  class: `${params.row.sys_default_field != 1 ? "textColor" : "textColor2"}`,
                  on: {
                    click: (event) => {
                      if (params.row.sys_default_field != 1) {
                        this.deleteFielFn(params.row)
                      }
                    },
                  },
                  style: {
                    fontSize: "16px",
                    margin: "0 0 0 8px",
                  },
                }, '删除'),
              ]
            );
          },
          tooltip: true
        },
      ],
      tableData: [],
    };
  },
  created() {
    this.getFielList(true)
  },
  methods: {
    ...mapActions(["getPageFieldAPI", "deleteFieldAPI",]),
    // 获取字段列表
    getFielList(flag) {
      if (flag) {
        this.page.start_recd = 1
      }
      this.getPageFieldAPI(this.page).then(res => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          this.tableData = data.fieldInfos || []
          this.page.allTotal = data.all_recd
        } else {
          this.tableData = this.$options.data().tableData
        }
      })
    },
    //分页
    onClickPage(pageNum) {
      this.page.start_recd = pageNum;
      this.getFielList()
    },
    // 字段新增
    addFielFn(item) {
      this.$refs.addFielDom.openFielModal(item)
    },
    // 字段删除
    deleteFielFn(item) {
      this.$YsModal.confirm({
        title: "删除",
        content: "<p>确认是否删除！</p>",
        onOk: () => {
          this.deleteFieldAPI({ fieldInfo: { id: item.id } }).then(res => {
            let { data, msg, scode, status } = res;
            if (status === 'ok') {
              this.getFielList(true)
              this.$YsMessage.success(data.message_text);
            } else {
              this.$YsMessage.error(msg);
            }
          }).catch(err => {
            this.$YsMessage.error('删除失败');
          })
        },
      });
    },
  },

};

</script>
<style lang="less" scoped>
.anouter {
  width: 100%;
  height: 100%;
  display: flex;

  .analysis-right {
    width: 100%;
    .analysis-r-top {
      display: flex;
      align-items: center;
      padding: 0 16px;
      height: 72px;
      border: 1px solid #cfd7e5;
      border-radius: 4px;
      margin-bottom: 8px;
      .open-btn {
        margin-left: auto;
      }
    }

    .analysis-r-bom {
      margin-top: 8px;
      height: calc(100% - 96px);
      border-radius: 4px;
      border: 1px solid transparent;
    }
  }
}

.searchBtn {
  width: 80px;
  min-width: 80px;
  height: 40px;
  font-family: PingFang SC;
}
/deep/ .textColor {
  cursor: pointer;
  color: #0091ff;
  &:hover {
    opacity: 0.8;
  }
}
/deep/.textColor2 {
  color: #405680;
  opacity: 0.6;
}
</style>
